<template>
  <div>
    <Modal :mask-closable="false" transfer v-model="modalState" fullscreen title="文件预览" @on-cancel="cancel" class="modal-content-layout">
      <div v-if="isStudy" class="studyTime">学习时长：{{ time }}</div>
      <iframe ref="iframe" id="iframe" height="100%" width="100%"
              :src="prePath"
              frameborder="0"></iframe>
      <div slot="footer">
        <Button type="primary" @click="cancel">{{ $t('common.Cancle') }}</Button>
        <Button v-if="!!fileName"  @click="download">{{ $t('doc.download') }}</Button>
      </div>
      <Spin size="large" fix v-show="spinShow">
        <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
        <div>文件加载中</div>
      </Spin>
    </Modal>
  </div>

</template>

<script>

export default {
  name: 'iframeModalCompent',
  components: {
    // Modal,
  },
  props: ['iframeShow', 'iframeModalSrc','fileName','isPrint','infoId'],
  data() {
    return {
      modalState: this.iframeShow,
      // iframeModalSrc: ''
      learningStartTime: '',
      time: '00:00:00',
      time1: null,
      spinShow: true,
      prePath: "",

    }
  },

  mounted() {
    let $this = this;
    document.oncontextmenu = function () {
      return false;
    };
    var iframe = document.getElementById('iframe');
    iframe.onload = function () {
      iframe.contentWindow.document.oncontextmenu = function () {
        return false;
      };
      iframe.contentWindow.document.onselectstart = function () {
        return false;
      };

      $this.spinShow = false;
    };
    let env = process.env.NODE_ENV;
    let origin = window.location.origin;
    let path = '/';
    if (env === 'tong') {
      path = '';
    }
    let url;
    if (this.isPrint){
      url = origin + path + `${this.iframeModalSrc}`
    }else {
      url = origin + path + `/fileServer/onlinePreview?url=${origin + this.util.filePathToUrl(this.iframeModalSrc)}`
    }
    this.prePath = url

  },

  destroyed() {
    document.oncontextmenu = function () {
      return true;
    };
    this.time1 = null
  },
  methods: {
    cancel() {
      this.modalState = false
      this.$emit('closeIframe')
    },
    // 完成
    download() {
      let a = document.createElement('a')
      a.style.display = 'none'
      a.href =  window.location.origin + this.util.filePathToUrl(this.iframeModalSrc)
      a.download = this.fileName
      document.body.appendChild(a)
      a.click()
      a.remove()
    }
  },

}
</script>

<style scoped lang="scss">
.studyTime {
  font-size: 18px;
  font-weight: bolder;
  margin-bottom: 15px;
}

.ivu-spin-fix {
  background: #f5f8fa
}
</style>
<style lang="scss">

</style>
